<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">
    
   
  <button @click="find()">点击查找</button>
  <!-- <button @click="find(target,arr)">点击查找<input type="text" v-model="target" ></button> -->
    
</div>

<script>
  const { createApp } = Vue
  
  createApp({
    data() {
      return {
        // shuju:[11,12,13,14,15,16,17,18,19],
        // target:15,
        // num:0
      }
    },
    methods:{
        find(){
          
                let array =[52,2,62,22,10,5,90,31,60,50,10] // 定义有序数组
                let find = +prompt("输入你要查找的元素："); // 接收用户需要查找的数组 并将其转换为整数
                let left = 0; // 左端点的值
                let right = array.length - 1; // 右端点的值
                let count = 0; // 用于计次
 
                // 确保数组内含有至少一个元素
                while (left <= right) {
                    // 中间值的计算
                    // js需要用 Math.floor() 方法将所得的数做一个取整计算
                    let mid = Math.floor((left + right) / 2);
 
                    // 此处做一个对输入的判断 如果输入的数要大于最大值或者小于最小值，那么查找的数就不再这个数组中
                    if (find > array[right] || find < array[left]) {
                        alert("抱歉你要找的数不在这个数组中")
                        break;
                    }
 
                    count++;
                    if (array[mid] == find) {
                        // 如果相等，直接输出次数
                        alert("该数在这个数组中，查找了" + count + "次");
                        return 0;
                    } else if (array[mid] > find) {
                        // 如果中间值大于左边的值 改变右端点
                        right = mid - 1;
                    } else {
                        // 如果中间值大于右边的值 改变左端点
                        left = mid + 1;
                    }
 
                
            }
        }
    }
  }).mount('#app')
</script>
